<template>
  <div class="anime-main-msg">
    <div class="cover">
      <BaseImg :src="AnimeMsg.cover" :lazy="true" />
    </div>
    <div class="anime-msg">
      <h2>{{ AnimeMsg.animeTitle }}</h2>
      <div class="classify-msg">
        <div class="line-split" v-for="item in classify_msg" :key="item.id">
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </div>
      </div>
      <div class="tag">
        <span v-for="item in tag" :key="item.id">{{ item.tagName }}</span>
      </div>
      <div class="about">
        <p>
          <a target="_blank" :href="AnimeMsg.officialWebsite"
            >官方网站：{{ AnimeMsg.officialWebsite }}</a
          >
        </p>
        <p class="introduce">简介:{{ AnimeMsg.aboutAnime }}</p>
      </div>
      <div class="collect_btn">
        <CollectButton :id="AnimeMsg.id" />
      </div>
    </div>
  </div>
</template>

<script>
import { inject, watch, ref } from 'vue'

import BaseImg from '../Global/BaseImg.vue'
import CollectButton from '@comps/Button/CollectButton.vue'

import { getAnimeTag } from '../../api'
import { UserCollectStore } from '../../stores/request'
import { UserInfo } from '../../stores/userInfo'

export default {
  name: 'AnimeMainMsg',
  components: {
    BaseImg,
    CollectButton
  },
  props: {},
  setup() {
    const userinfo = UserInfo()
    const CollectStore = UserCollectStore()
    const AnimeMsg = inject('AnimeMsg')
    const tag = ref([])
    const classify_msg = ref([])

    const init = watch(
      AnimeMsg,
      async () => {
        if (AnimeMsg.value === null || AnimeMsg.value === undefined || AnimeMsg.value.length <= 0) {
          return
        }

        await (() => {
          // 请求配置 初始化
          CollectStore.add_delete_collect.animeId = AnimeMsg.value.id
          CollectStore.add_delete_collect.userId = CollectStore.user_collect_option.userId =
            userinfo.userId
          CollectStore.queryCollect(CollectStore.add_delete_collect, (res) => {
            CollectStore.isCollect = res.data
            console.log(CollectStore.isCollect)
          })

          classify_msg.value = [
            {
              id: 0,
              title: '发行年份',
              content: AnimeMsg.value.publishYear.slice(0, 10)
            },
            {
              id: 1,
              title: '语言',
              content: AnimeMsg.value.isAnimeOrCartoon === 0 ? '日语' : '普通话'
            },
            {
              id: 2,
              title: '地区',
              content: AnimeMsg.value.country
            },
            {
              id: 3,
              title: '作者',
              content: AnimeMsg.value.writer
            }
          ]
          getAnimeTag(AnimeMsg.value.id, (res) => {
            tag.value = res.data
          })
        })()

        init()
      },
      { immediate: true }
    )

    return {
      AnimeMsg,
      tag,
      classify_msg
    }
  }
}
</script>

<style lang="scss" scoped>
$gap: 20px;
.anime-main-msg {
  width: 100%;
  display: flex;
  .cover {
    cursor: pointer;
    margin-right: $gap;
    width: 210px;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
  }
  .anime-msg {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: $gap;
    color: $font;
    overflow: hidden;
    h2 {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .classify-msg {
      display: flex;
      gap: $gap;
      .line-split {
        padding: 2px $gap 2px 0;
        gap: 10px;
        box-sizing: border-box;
        border-right: 1px solid $font;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h4 {
          font-size: 12px;
        }
        p {
          font-size: 16px;
        }
        &:last-child {
          border: 0;
        }
      }
    }
    .tag {
      display: flex;
      gap: 10px;
      span {
        display: block;
        padding: 5px;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 12px;
        border: 1px solid $font;
        border-radius: 4px;
      }
    }
    .about {
      .introduce {
        margin-top: 5px;
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      a {
        color: $font;
      }
    }
  }
}
</style>
